.font-biryani{
    font-family: 'Biryani', sans-serif;
}
.font-sans-serif
{
    font-family: sans-serif;
}
body{
    font-family: 'Biryani', sans-serif !important; 
}
.vh-100{
    height:100vh;
}
.landing-page{
    background-color:white !important;
}

li.nav-item.active{
    border-bottom:3px solid #6889EC;
}
.active{
    border-bottom:3px solid #6889EC;
}
.bg-img{
    background-image:url('/CameraTrapAssets/img/landing-img.png');
    background-repeat:no-repeat !important;
    background-size: cover;
    margin-top:-2.9%;
}
.try-it
{
  margin-left:15%;
  margin-top:20px;
}
.position-fixed{
    position:fixed;
}
.position-relative{
    position: relative;
}
.top-42{
    top:42%;
}
.bottom-50{
    bottom:50%;
}
.custm-gery-1{
    color: #9B9B9B;
}
.custm-gery-2{
    color:#4A4A4A;
}
.custm-gery-3{
    color:#797979;
}
.custm-grey-4{
    background-color:#808080;
}
.custm-grey-5{
    color:#8B8A84
}
.text-light-green{
    color:#3ABFAD;
}
.text-black
{
  color:black!important;
}

.text-gray
{
  color:gray !important;
}

.top-27{
    top:-20%;
}
.image-details-bg{
    background-color:#EDEAE1;
}
.custm-circle{
    width: 22px;
    height: 22px;
    padding: 3px 7px
}
.border-after{
    border-left:1px solid red;
}
.or-color{
    color: #7F7B81;
}
.or{
    color: #7F7B81;
    width: 20px;
}
#progress-msg
{
    display: block;
    text-align:left;
    color:blue;
    z-index:9500;
}
.color-black{
    color:#000;
}
.clasif-color{
color:#04B491;
}
.custm-width-1{
	width:500px;
}
.process-btn{
    background-color: #04B491;
}
.reset-btn-border{
    border: 1px solid #C1C1C1 !important;
}
.height-38{
    height:38px;
}
.yellow-bg{
    background-color: #FFDF20;
}
.grey-bg{
    background-color: #F5F5F5;
}
.letter-spacing-7{
    letter-spacing:7.73px;
}
.letter-spacing-07{
    letter-spacing: 0.77px;
}
.letter-spacing-3{
    letter-spacing:3.55px;
}
.letter-spacing-1{
    letter-spacing:1.33px;
}
.letter-spacing-2{
    letter-spacing: 2.93px;
}
.letter-spacing-5
{
    letter-spacing: 5.97px;
}
.font-size12{
    font-size:12px;
}
.font-size10{
    font-size:10px;
}
.border-radius-19{
    border-radius:19px;
}
.border-radius-30{
    border-radius:30px;
}
.left-23{
    left:23%;
}
.font-size-36{
    font-size:36px;
}
.font-size14{
    font-size:14px;
}
.font-size18{
    font-size:18px;
}
.font-weight-800{
    font-weight: 800 !important;
}
.width-70{
    width:70%;
}
.margin-neg{
    margin-top:-13%;
}
.w-82{
    width:82px;
}
.h-82{
    height:82px;
}
.margin-top-30{
    margin-top:30px;
}
.marfin-neg-25{
    margin-top:-25px;
}
.rotate{
    transform: rotate(180deg);
}
.column {
    flex: 25%;
    max-width: 30%;
  }
.scroll-class{
    max-height:500px;
    overflow:auto;
}
.z-index-999{
    z-index:9999;
}
.font-weight-300{
    font-weight:300;
}
.border-bottem-black{
    border-bottom:3px solid #1B1B1B !important;
}
.border-light-gray{
  border: solid 1px #bdbbbb!important
}
.top-20{
    top:20%;
}
.top-15{
  top:15%;
}

.top-12{
  top:12%;
}

.fontsize-24{
    font-size:24px;
}
.detailed-border::before{
    content: "";
    border-left: 1px solid #ccc;
    left: 10px;
    position: relative;
    z-index: -9999;
    top: 15px;
}

.upload-container
{
  margin: 0 auto;
}
/*upload button*/

.upload {
    opacity: 0;
    overflow: hidden;
    position: absolute;
     z-index: -1;
}
.upload-border{
    border:1px dashed #C5BBB8;
    border-radius:8px;
}
.upload-bg{
    background-color: rgba(202,193,193,0.1);
}
  /*custom scroll bar */
div ::-webkit-scrollbar {
    width: 8px;
}
div ::-webkit-scrollbar-track {
    border-radius: 2px;
    border: 1px solid #ddd;
}
div ::-webkit-scrollbar-thumb {
    border-radius: 3px;
    border: 1px solid #ddd;
    background-color:#979797;
    opacity:0.5;
}
/*gallery details page css*/
.table-responsive
{
    background:#F7F6F4;
}
.table-bg{
    background:#F7F6F4;
    height:98vh !important;
}
.text-elipse{
    width:100px;
    overflow: hidden;
    text-overflow: ellipsis; 
    white-space: nowrap; 
}
/*waterwheel carosuel plugin */

/*--water_whjeel_carousel--*/
#carousel img { 
	opacity:0;
	width:280px;
	height:300px;
}
#carousel {
	margin:0px auto;
	margin-top:30px;
	height:300px;
	position:relative;
	clear:both;
	overflow:hidden;
}

#carousel-classification {
    margin: 0 auto;
    margin-top: 30px;
    height: 300px;
    position: relative;
    clear: both;
    overflow: hidden;
}

.carousel_wrap .nav_button { 
	position:absolute;
	left:0px;
	top:200px;
	font-size:40px;
	font-weight:300;
	color:#979797 !important;
	cursor:pointer;
	display:inline-block;
	transition:all 0.3s ease;
}
.carousel_wrap .nav_button.prev_button { 
	left:50px;
}
.carousel_wrap .nav_button.next_button { 
	
	left:auto;
	right:50px;
}
 .custm-dd-toggle::after {
    border-top: .5em solid !important;
    border-right: .5em solid transparent !important;
    border-left: .5em solid transparent !important;
    vertical-align:2px !important;
}

.carousel-item.active,
.carousel-item-next,
.carousel-item-prev{
    display:block;
}



/*overlay css*/

.content {
    position: relative;
    width: 92%;
    max-width:500px;
    margin: auto;
    overflow: hidden;
  }
  
  .content .content-overlay {
    background: linear-gradient(180deg, #890D02 0%, #230606 100%);
    position: absolute;
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    opacity: 0;
    border-radius:8px;
    -webkit-transition: all 0.4s ease-in-out 0s;
    -moz-transition: all 0.4s ease-in-out 0s;
    transition: all 0.4s ease-in-out 0s;
  }
  
  .content:hover .content-overlay{
    opacity: 0.5;
  }
  
  .content-image{
    width: 100%;
  }
  
  .content-details {
    position: absolute;
    text-align: center;
    padding-left: 1em;
    padding-right: 1em;
    width: 100%;
    top: 50%;
    left: 50%;
    opacity: 0;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    -webkit-transition: all 0.3s ease-in-out 0s;
    -moz-transition: all 0.3s ease-in-out 0s;
    transition: all 0.3s ease-in-out 0s;
  }
  .content:hover .content-details{
    top: 50%;
    left: 50%;
    opacity: 1;
  }
  .content-details p{
    color: #fff;
    font-size: 0.8em;
  }
.top-8{
	top:-8%;
}
.table-scroll{
    max-height: 600px;
    overflow:auto;
	display:block;
	width:100% !important;
}
.overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    height:350px;
    width:350px;
    right: 0;
    opacity: 0;
    transition: .5s ease;
    background: linear-gradient(180deg, #890D02 0%, #230606 100%);
  }
  
  .kh:hover .overlay {
    opacity: 0.9;
  }
  
  .text {
    color: white;
    font-size: 20px;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    text-align: center;
  }


/* Loading spinner css */
/* Absolute Center Spinner */
/*.loading {
    position: fixed;
    z-index: 999;
    height: 2em;
    width: 2em;
    overflow: show;
    margin: auto;
    top: -20%;
    left: 35%;
    bottom: 0;
    right: 0;
  }*/
  .loading {
    border: 10px solid #f3f3f3;
    border-radius: 50%;
    border-top: 10px solid #c1bfb8;
    width: 55px;
    height: 55px;
    position:fixed;
    top:40%;
    left:50%;
    -webkit-animation: spin 2s linear infinite; /* Safari */
    animation: spin 2s linear infinite;
    z-index:8000;
}
#overlay {
    position: fixed;
    display: none;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.5);
    z-index: 2;
    cursor: pointer;
}
.results-loading {
    border: 10px solid #f3f3f3;
    border-radius: 50%;
    border-top: 10px solid #c1bfb8;
    width: 55px;
    height: 55px;
    position: absolute;
    top: 40%;
    left: calc(50% - 27.5px);   
    -webkit-animation: spin 2s linear infinite; /* Safari */
    animation: spin 2s linear infinite;
}
  
  /* Transparent Overlay */
  
  /*.loading:before {
    content: '';
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.05);
  }*/
  
  /* :not(:required) hides these rules from IE9 and below */
  
  /*.loading:not(:required) {
    font: 0/0 a;
    color: transparent;
    text-shadow: none;
    background-color: transparent;
    border: 0;
  }*/
  
  /*.loading:not(:required):after {
    content: '';
    display: block;
    font-size: 10px;
    width: 1em;
    height: 1em;
    margin-top: -0.5em;
    -webkit-animation: spinner 1500ms infinite linear;
    -moz-animation: spinner 1500ms infinite linear;
    -ms-animation: spinner 1500ms infinite linear;
    -o-animation: spinner 1500ms infinite linear;
    animation: spinner 1500ms infinite linear;
    border-radius: 0.5em;
    -webkit-box-shadow: rgba(0, 0, 0, 0.75) 1.5em 0 0 0, rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0, rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.5) -1.5em 0 0 0, rgba(0, 0, 0, 0.5) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0;
    box-shadow: rgba(0, 0, 0, 0.75) 1.5em 0 0 0, rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0, rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) -1.5em 0 0 0, rgba(0, 0, 0, 0.75) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0;
  }*/

  /* Animation */


/* Safari */
@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
    }
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}


/*@-webkit-keyframes spinner {
    0% {
      -webkit-transform: rotate(0deg);
      -moz-transform: rotate(0deg);
      -ms-transform: rotate(0deg);
      -o-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    100% {
      -webkit-transform: rotate(360deg);
      -moz-transform: rotate(360deg);
      -ms-transform: rotate(360deg);
      -o-transform: rotate(360deg);
      transform: rotate(360deg);
    }
  }
  @-moz-keyframes spinner {
    0% {
      -webkit-transform: rotate(0deg);
      -moz-transform: rotate(0deg);
      -ms-transform: rotate(0deg);
      -o-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    100% {
      -webkit-transform: rotate(360deg);
      -moz-transform: rotate(360deg);
      -ms-transform: rotate(360deg);
      -o-transform: rotate(360deg);
      transform: rotate(360deg);
    }
  }
  @-o-keyframes spinner {
    0% {
      -webkit-transform: rotate(0deg);
      -moz-transform: rotate(0deg);
      -ms-transform: rotate(0deg);
      -o-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    100% {
      -webkit-transform: rotate(360deg);
      -moz-transform: rotate(360deg);
      -ms-transform: rotate(360deg);
      -o-transform: rotate(360deg);
      transform: rotate(360deg);
    }
  }
  @keyframes spinner {
    0% {
      -webkit-transform: rotate(0deg);
      -moz-transform: rotate(0deg);
      -ms-transform: rotate(0deg);
      -o-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    100% {
      -webkit-transform: rotate(360deg);
      -moz-transform: rotate(360deg);
      -ms-transform: rotate(360deg);
      -o-transform: rotate(360deg);
      transform: rotate(360deg);
    }
  }*/
  /* End of Loading CSS */


.b-lazy {
    -webkit-transition: opacity 500ms ease-in-out;
       -moz-transition: opacity 500ms ease-in-out;
         -o-transition: opacity 500ms ease-in-out;
            transition: opacity 500ms ease-in-out;
             max-width: 100%;
               opacity: 0;
}
.b-lazy.b-loaded {
               opacity: 1;
}

.row-background{
    background-color: #C1C1C1;

}
.text-align-center
{
  text-align:center !important;
}

.w-80
{
  width: 80%;
}

.popover{
    margin-top:100px !important;
    width:30%;
    height:auto;  
    padding:5px;
    border:solid 1px gray;
    max-width:none;  
}
.top-10
{
    top:10%;
}
.w-70{
  width: 70% !important;
}
.upload-title-text
{
    height: 64px;	
    width: 199px;	
    color: #4A4A4A;	  
}
.w-90
{
    width:90% !important;
}

.w-95
{
    width:95% !important;
}

.ai4e_title_show
{
    display: block;
}
.ai4e_title_hide
{
    display: none;
}
.aie-link {
    font-size: 11pt;
    font-weight: 500;
    margin-top:6.2px;
}
.logo-container
{
    margin-top: -4px;
}
.logo-divider
{
    margin-left: 9px;
    margin-top:2px;
}
.w-65
{
    width:65% !important;
}
.dz-image {
    height: 90px !important;
    width: 90px !important;
 }
 form.dropzone
 {
   display: block;
 }
 .underline
 {
     text-decoration: underline !important;
 }
.dropzone{
	min-height:300px !important;
}
.dropzone .dz-preview .dz-image {
    width: 120px !important;
    height: 120px !important;
}

.hm-logo-grey{
	display:none;
}
.text-width{
	width: 100px;
    	overflow: hidden;
    	text-overflow: ellipsis;
    	white-space: nowrap;
    	max-width: 150px;
}
.td-align td{
	max-width: 126px;
	min-width: 100px;
}
@media (min-width:1024px){
	.navbar{
	padding:0px;
    }
    .bg-img{
        margin-top:-4%;
        }
}
@media (max-width:1024px){
    .bg-img{
        margin-top:-4%;
        }
.ai4e_title_show {
    display: none !important;
}
.hm-white-logo{
	display:none;
}
.hm-logo-grey{
	display:block;
}
}
@media (min-width:1024px) (max-width:1290px){
	.bg-img{
		margin-top:-4%;
	}
} 
@media (max-width:1024px){
	/* .text-md-center{
	text-align:center;
   } */
	.bg-img{
		background-image:url('/CameraTrapAssets/img/mobile_cheetah.png');
		background-repeat:no-repeat;
		background-size: contain;
		margin-top:-12%;
		background-position:bottom;
	}
	.navbar a{
		color:#000 !important;
	}
	.upload-title-text{
		width:auto;
	}
	.width-resp {
		width: 100%!important;
	}
	.content{
		max-width:100%;
	}
	.scroll-class{
		max-height:900px;
	}
	.navbar-toggler-icon {
  	  	background-image: url(/CameraTrapAssets/img/horiz-menu.png);
	}
	.logo-divider{
		color:#9b9b9b !important;
	}
	.bg-img span{
		color:#000 !important;
	}
}
@media (max-width: 1000px) { 
    .navbar{
	margin-bottom:15px;
	}
	.dropzone{
	width:100% !important;
	margin-left:0 !important;
	}
	.p-sm-0{
	padding:0px !important;
	}
	.resp-title .mobile-title{
        color:#000 !important;
        display:block;
    }
    .resp-title{
        margin-bottom:40px;
        font-size:20px;
    }
    .left-sm-0{
        left:0;
    }
    .landing-page {
        background: none;
    }
    .mobile-top{
        top:30%;
        left:0;
        text-align:center;
    }
    .no-wrap{
        flex-wrap: nowrap
    }
    .navitems-mob{
        margin-left:0px !important;
        flex-direction: row;
    }
    .mr-sm-custm{
        margin-right:7rem;
    }
    /*about us page responsive css*/
    .no-spacing{
        padding:0px !important;
        margin:0px !important;
    }
    .no-d-flex{
        display:block !important;
    }
    .width-sm-custm{
        width:auto !important;
    }
    /*gallery page*/
    .column{
        max-width:100%;
    }
    /*gallery details page*/
    .top-0{
        top:0 !important;
    }
    .h-auto{
        height:auto;
    }
    /*upload page*/
    .upload-page{
        background: none;
    }
    .vh-sm-100{
        height:auto !important;
    }
    .upload-pos{
        position:relative !important;
        width:auto !important;
    }
    .upload-sm-color{
        color:#4A4A4A !important;
        width:auto !important;
        padding:0 !important;
    }
    #carousel img{
        width:150px;
        height:180px;
    }
    #carousel{
        margin-top:0;
    }
    .mb-sm-5{
        margin-bottom:3rem;
    }	
	.resp-m-0{
	margin:0 !important;
	}
}
  /*about us page circle*/
@media (max-width:768px){
	 .navbar a{
	color:#000 !important;
	}
	.mb-view{
	border-top:1px solid #ccc;
	margin-top:10px;
}
	.navbar{
	margin-bottom:15px;
	}
	.dropzone{
	width:100% !important;
	margin-left:0 !important;
	}
	.p-sm-0{
	padding:0px !important;
	}
	.bg-img{
		background-image:url('/CameraTrapAssets/img/mobile_cheetah.png');
		background-repeat:no-repeat;
		background-size: contain;
		margin-top:-12%;
		background-position:bottom;
	}
        .resp-title .mobile-title{
        color:#000 !important;
        display:block;
    }
    .resp-title{
        margin-bottom:40px;
        font-size:20px;
    }
    .left-sm-0{
        left:0;
    }
    .landing-page {
        background: none;
    }
    .mobile-top{
        top:30%;
        left:0;
        text-align:center;
    }
    .no-wrap{
        flex-wrap: nowrap
    }
    .navitems-mob{
        margin-left:0px !important;
        flex-direction: row;
    }
    .mr-sm-custm{
        margin-right:7rem;
    }
    /*about us page responsive css*/
    .no-spacing{
        padding:0px !important;
        margin:0px !important;
    }
    .no-d-flex{
        display:block !important;
    }
    .width-sm-custm{
        width:auto !important;
    }
    /*gallery page*/
    .column{
        max-width:100%;
    }
    /*gallery details page*/
    .top-0{
        top:0 !important;
    }
    .h-auto{
        height:auto;
    }
    /*upload page*/
    .upload-page{
        background: none;
    }
    .vh-sm-100{
        height:auto !important;
    }
    .upload-pos{
        position:relative !important;
        width:auto !important;
    }
    .upload-sm-color{
        color:#4A4A4A !important;
        width:auto !important;
        padding:0 !important;
    }
    #carousel img{
        width:150px;
        height:180px;
    }
    #carousel{
        margin-top:0;
    }
    .mb-sm-5{
        margin-bottom:3rem;
    }
.resp-m-0{
margin:0 !important;
}
}
@media (max-width:576px){
.bg-img{
	margin-top:-27% !important;
}
.hide-mobile{
	display:none !important;
}
.width-resp{
	width:100% !important;
}
.dropzone{
 min-height:330px !important;
}
.text-sm-center{
text-align:center;
}
.hide_white_logo
{
  display:none;
}
}
.table-caption
{
    caption-side: top !important;
    background-color: #EDEAE1;
    padding-top: 55px;
    padding-bottom: 37px;
    padding-left:20px;
}
.bounding-boxes-cell
{
    text-align:center;
    max-width: 155px !important;
    min-width:155px !important;
}
.file-name-cell
{
    min-width:220px !important;
    max-width: 220px !important;
}
.results-cell
{
  text-align:center;
  min-width:100px !important;
  max-width: 100px !important;
}
.path-cell
{
  min-width:100px !important;
  max-width: 100px !important; 
}